<template>
    <!-- 首页头部 -->
    <header class="header">
        <div class="home-header">
            <div class="header-left">
                <img class="left-img" src="@/assets/image/home/1896.png">
                <span class="left-title">分布式金融</span>
            </div>
            <div class="header-right">
                <div class="right-box">
                    <figure v-if="userInfo.token" class="flex items-center"><img class="box-img" src="@/assets/image/home/hint.png"></figure>
                    <button v-else class="right-button">連接</button>
                </div>
                <img @click="openPop" class="right-img" :src="isImg">
            </div>
        </div>
        <sidebar :isShow="isShow" @setShow="(val)=>isShow = val"/>
    </header>
</template>

<script>
import sidebar from './components/sidebar.vue';
import { mapGetters } from "vuex";
export default {
    components:{
        sidebar,
    },
    data() {
        return {
            isShow:false,
        }
    },
    computed:{
        ...mapGetters({
            userInfo: 'user/userInfo',
            theme: 'home/theme'
        }),
        isImg(){
            return this.isShow ? require('@/assets/image/home/close.png') : require('@/assets/image/home/9172.png');
        }
    },
    methods: {
        openPop(){
            this.isShow = !this.isShow;
        }
    },
}
</script>

<style lang="scss" scoped>
.header {
    height: 106px;
    .home-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 106px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        background-color: #161A1E;
        padding: 0 32px;
        box-sizing: border-box;

        .header-left {
            display: flex;
            align-items: center;

            .left-img {
                width: 68px;
                height: 64px;
                margin-right: 6px;
            }

            .left-title {
                font-size: 52px;
                color: #fff;
                font-weight: 600;
            }
        }

        .header-right {
            display: flex;
            align-items: center;

            .right-box {
                padding-right: 21px;
                border-right: 2px solid #242729;
                margin-right: 35px;
                .box-img{
                    width: 56px;
                    height: 56px;
                }
                .right-button {
                    min-width: 100px;
                    height: 56px;
                    background-color: #fff;
                    border: none;
                    border-radius: 6px;
                    padding: 0 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #000;
                }
            }

            .right-img {
                width: 34px;
                height: 36px;
            }
        }
    }
}
</style>